#{extends 'User.html' /}

<script type="text/javascript">

    $(document).ready(function(){
        $('#photos').galleryView({
            panel_width: 955,
            panel_height: 240,
            frame_width: 10,
            frame_height: 10,
            transition_speed: 1500,
            frame_gap: 0,
            easing: 'easeInOutQuad',
            transition_interval: 10000
        });

        $(".scrollable").scrollable();

        //$("a[rel^='prettyPhoto']").prettyPhoto();

        //$('img').css('top','0');
        //$('.test').css('top','0');
    });
</script>

#{set "moreStyles"}
<style>
    .items div {
        float:left;
        width:860px;
    }
    .scrollable {
        width:850px;
        height: 170px;
    }

    .scrollable img {
        width: 175px;
        height: 130px;
    }

    div.items div div.tab_caption {
        width: 192px;
        margin:0;
        padding: 5px 10px 5px 10px;
        border-right: 1px #999 dotted;
    }

    a.browse {
        margin-top: 70px;
    }


</style>
#{/set}



<div id="topheaders" style="z-index: 800;">
</div>

<div id="mainContent" style="z-index: 790;">
    <div id="gallery" class="gallery" >

        <ul id="photos">
            #{list items:allSlides, as:'oneBanner' }
            	<div> ${oneBanner.title} </div>
                <li class="panel" >
                    <img class="test" src="@{User.getBannerImage(oneBanner.id)}" alt="${oneBanner.title}" title="${oneBanner.title}" />
                     
                    <div class="panel-overlay">
                        <h4><span>${oneBanner.title}</span></h4>
                    </div>
                    
                </li>
            #{/list}

        </ul>
    </div>

</div>

<br class="clearfloat">

<br/>

<div id="sliderContain" style="padding-left: 10px">
    <a class="prev browse left disabled"></a>

    <div class="scrollable">
        <!-- root element for the items -->
        <div class="items" style="left: 0px; ">
            *{#{list items:allGroupApps, as:'one' }}*
            #{list items:play.configuration.menuAppGroups, as:'one' }
                #{if one_index %4 ==1 }
                <div>
                    #{/if}
                    <div class="tab_caption" align="center">
                        <h4 >
                            #{a @User.listAppInGroup(one.code, one.getShortTitle())} ${one.title}
                            #{/a}
                        </h4>
                        #{a @User.listAppInGroup(one.code, one.getShortTitle())}
                            <img src="@{User.getAppGroupImage(one.id)}" alt="${one.brief}" title="${one.brief}" >
                        #{/a}
                    </div>
                #{if one_index % 4 ==0 || one_isLast}
                </div>
                #{/if}
            #{/list}
        </div>
    </div>

    #{if play.configuration.menuAppGroups.size() > 4}
        <a class="next browse right"></a>
    #{/if}
    #{else}
        <a class="next browse right disabled"></a>
    #{/else}
</div>

<br class="clearfloat">
<br/>
<marquee height="50px" scrollamount="3" onmouseout="this.start();" onmouseover="this.stop();" direction="left" behavior="scroll">
    #{list items:allBrands, as:'brand' }
    <a title="${brand.title}" target="_blank" href="${brand.homepage}" style="text-decoration: none;">
        <img border="0" style="height:35px; padding:3px; border:1px #CCC solid" src="@{User.getBrandImage(brand.id)}" title="${brand.title}" alt="${brand.title}">
    </a>
    #{/list}
</marquee>